<template>
  <view class="preference">
    <view class="margin-box" :class="cardType == 202 || cardType == 203 || cardType == 204 ? 'active' : ''">
      <view class="order-top-box" v-if="cardType == 202 || cardType == 203 || cardType == 204">
        <view class="top-left">
          <img class="titleIcon" :src="info.args.cardTitle.titleIcon" alt="" srcset="" />
          <img class="titleImg" :src="info.args.cardTitle.titleImg" alt="" srcset="" />
        </view>
        <view class="top-right" 
          @click="orderItemClick"
          :data-spmCntSuffix="'ChatAiPage.orderCard@1.moreBtn@'"
          :data-custom="1"
          :data-spm="{args: info.args}">
          <view class="right-text">查看更多订单</view>
          <img class="right-icon" src="https://cdn1.visiotrip.com/h5AndMini/2024-06-06/right-chat.png" />
        </view>
      </view>
      <view
        class="scroll-box"
        v-for="(content, index) in info.args.cardContent"
        :key="index"
      >
        <view class="order-title omit1" @click="orderInfo(content.orderId, true)" v-if="cardType == 202 || cardType == 203 || cardType == 204">{{ content.productName }}</view>
        <block v-if="cardType == 402">
          <view class="pdf-view" @click="orderInfo(content.orderId, true)"
          :data-spmCntSuffix="'ChatAiPage.orderCard@1.orderInfo@'"
          :data-custom="1"
          :data-spm="{orderId: content.orderId}">
            <image :src="content.imgUrl" class="image" />
            <view class="view">{{ content.title }}</view>
          </view>
        </block>

      </view>
      <view
        class="footer-view"
        v-if="info.args.cardBtn && info.args.cardBtn.length > 0"
      >
        <block>
          <view
            v-for="(btn, index) in info.args.cardBtn"
            :key="index"
            :class="'footer-btn ' + btnStyle(index)"
            @click="sureClick(btn)"
            :data-spmCntSuffix="'ChatAiPage.hotelOrderCard@1.footBtn@'"
            :data-custom="index + 1"
            :data-spm="btn"
          >
            {{ btn.text }}
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
    },
    cardType: {
      type: Number,
    },
    unclickable: {
      type: Boolean,
    },
  },
  computed: {},
  data() {
    return {};
  },
  watch: {},
  methods: {
    btnStyle(index) {
      switch (this.cardType) {
        case 402:
          if (index === 0) {
            return "grey";
          }
          return "green"
        default:
          return "";
      }
    },
    //订单按钮跳转
    orderInfo(orderId, isFromChat) {
      if (this.unclickable) return;
      if (!this.$isLogin()) {
        return;
      }
      const url = "/packageApp/pages/verificationCode/verificationCode";
      this.$navTo(
        url,
        {
          orderId,
          isFromChat,
        },
        "navigateTo"
      );
    },
    sureClick(item) {
      if (this.unclickable) return;
      console.log(item, "item");
      if (item.buttonType === 10) {
        this.orderInfo(item.argObj.orderId, true);
      } else {
        this.$emit("sureClick", {
          ...item,
          actionText: item.message,
          buttonType: item.buttonType,
          ...item.argObj,
          triggerType: 4,
        });
      }
    },
    //酒店订单按钮跳转
    orderInfoHotel(orderId) {
      if (!this.$isLogin()) {
        return;
      }
      const url = "/packageApp/pages/orderCode/ordercode";
      this.$navTo(
        url,
        {
          orderId,
        },
        "navigateTo"
      );
    },
    //订单按钮跳转
		orderItemClick(item) {
			if (!this.$isLogin()) {
				return;
			}
			let { status, key } = {
        status:-1,
        key:-1
      }
			const url = '/packageB/pages/myOrderList/myOrderList'
			this.$navTo(url, {
				status, key
			}, 'navigateTo')
		},
  },
};
</script>

<style scoped lang="scss">
.preference {
  position: relative;
  padding: 0 20rpx;

  .margin-box {
    background: #ffffff;
    &.active{
      background: linear-gradient(180deg, #809dff 0%, #d1dcff 100%);
    }
    border-radius: 26rpx;
    padding-bottom: 21rpx;
    .order-top-box{
      padding: 0 14rpx;
      height: 54rpx;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .top-left{
        display: flex;
        align-items: center;
        .titleIcon{
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .titleImg{
          width: 125rpx;
          height: 30rpx;
        }
      }
      .top-right{
        display: flex;
        align-items: center;
        .right-text{
          font-size: 24rpx;
          color: #ffffff;
          line-height: 34rpx;
        }
        .right-icon{
          width: 18rpx;
          height: 18rpx;
        }
      }
      
    }
    .scroll-box {
      border-radius: 10rpx;
      padding: 21rpx 18rpx 18rpx 18rpx;
      // max-height: 807rpx;
      .order-title {
        width: 100%;
        height: 68rpx;
        background: #ffffff;
        margin: 0 auto;
        font-size: 24rpx;
        color: #131328;
        font-weight: 600;
        line-height: 68rpx;
        padding: 0 14rpx;
        border-radius: 16rpx;
      }
      &.sm-padding {
        padding: 10rpx;
      }
      .text-view {
        height: 24rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: $sl-color-grey;
        line-height: 24rpx;
        margin-bottom: 12rpx;
      }
      .text-view:last-child {
        margin-bottom: 0;
      }
      .pdf-view {
        display: flex;
        align-items: center;
        .image {
          width: 114rpx;
          height: 114rpx;
        }
        .view {
          height: 28rpx;
          font-size: 28rpx;
          font-weight: 600;
          color: $sl-color-dark-grey;
          line-height: 28rpx;
          margin-left: 16rpx;
        }
      }
      .btn-view {
        height: 24rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: $sl-color-light-grey;
        line-height: 24rpx;
        margin-top: 26rpx;
        .image {
          width: 11rpx;
          height: 18rpx;
        }
      }
    }
    .footer-view {
      display: flex;
      margin-top: 24rpx;
      justify-content: space-between;
      margin: 0 18rpx;
      .footer-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 299rpx;
        height: 68rpx;
        background: #EEF2FF;
        border-radius: 16rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #6581D9;
        &.grey {
          color: $sl-color-black;
          background: #E4E4F4;
        }
        &.green {
          color: $sl-color-black;
          background: #B4EF4E;
        }
      }
    }
  }
}
</style>
